<template>
  <view class="rainBox">
    <view class="countDown" v-if="secondMask">
      <img class="second" :src="'https://img.51fanbei.com/h5/app/activity/redRain_0'+second+'.png'">
    </view>
    <view v-if="!secondMask">
      <view class="redNum">
        <text class="icon">{{duration}}s</text>
        <!-- <text class="winnum">当前抢到红包：<text class="redmoney">{{acquisitionNum}}</text>元</text> -->
      </view>
      <view class="red_packet" id="red_packet">
        <view v-for="(item, index) in liParams">
          <view class="package" :style="{ left: item.left,width:item.width, height:item.width, animationDuration: item.durTime, webkitAnimationDuration: item.durTime}"
            :data-index="index" @webkitAnimationEnd="removeDom" @click="tap(item)">
            <text :style="{ width:item.width, height:item.width,transform: item.transforms, webkitTransform: item.transforms}"
              :class="[{ 'defaul':item.status==0},{'success':item.status==1},{'fail':item.status==2}]"></text>
          </view>
        </view>
				
       <view v-if="show1==true" @click="show = false" style="margin-top: 200upx;">
          <view class="warp flexcenter">
            <view class="rect" @tap.stop :style="{background: 'url(https://ctyh88.oss-cn-shenzhen.aliyuncs.com/static/puzzle/tanchuhongbao.png)no-repeat center center / 100%'}">
              <view class="rectcenter">
                <view class="rt-money">{{price}}元</view>
                <view class="rt-money1">已存余额</view>
              </view>
              <view class="btnredbg" @click="fanhui">我知道了</view>
              <view class="iconfil">
                <!-- <u-icon name="close-circle-fill" color="#b39b8f" size="40" class="iconfil" @click="show1 = false"></u-icon> -->
              </view>
              
            </view>
          </view>
        </view>
				
      </view>
    </view>

  </view>
</template>
<script>
  export default {
    // components: { noPrize },
    data() {
      return {
        second: 5, // 倒计时
        secondMask: true, // 倒计时弹层
        liParams: [], // 红包数组
        timer: null,
        duration: 10, // 持续时间
        selectedNum: 0, // 选中红包个数，不超过3个
        clickNum: 0, // 点击的次数
        randomNum: Math.ceil(Math.random() * 6), // 1~6 随机数
        couponArr: [],
        acquisitionNum: 0, // 获得红包个数
        show1: false, // 获取红包弹窗
				hid:'',
				price:'',
      }
    },
    created() {
      this.countDownFn()
    },
		onLoad(e) {
			console.log(e)
			this.hid=e.hid
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data
					this.setAjax()
				},
				fail: () => {
					uni.navigateTo({
						url: '../../../login/login'
					});
				}
			});
		},
    methods: {
			setAjax(){
				uni.request({
					url: 'https://app.t9y9y9.com//app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=member.redpaper.fafang&app=1',
					method: 'POST',
					data: {
						'openid':this.openid,
						'hid':this.hid,
						},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						console.log(res)
						this.price = res.data.price
					},
					fail: () => {},
					complete: () => {}
				});
			},
			fanhui(){
				uni.switchTab({
				    url: '../../member'
				});
			},
      // 5秒倒计时
      countDownFn() {
        let self = this
        let timer = setInterval(() => {
          if (self.second == 3) {
            self.secondMask = false
            clearInterval(timer)
            self.startRedPacket()
            self.countDownFn20()
          } else {
            self.second--
          }
        }, 1000)
      },
      // 20秒倒计时
      countDownFn20() {
        let self = this
        let timer = setInterval(() => {
          if (self.duration == 0) {
            clearInterval(timer)
            this.show1 = true
            console.log('结束')
          } else {
            self.duration--
          }
        }, 1000)
      },
      tap(item) {
        this.clickNum++
        if (this.selectedNum >= 3 && item.status == 0) {
          item.status = 2
          //				return false
        }

        if (this.clickNum == this.randomNum) {
          if (item.status == 0 && this.selectedNum < 3) {
            this.randomNum = Math.ceil(Math.random() * 6)
            this.clickNum = 0
            this.selectedNum++
            item.status = 1 // 随机出现只中奖
            this.acquisitionNum++
          }
        } else {
          item.status = 2
        }
      },
      startRedPacket() {
        let win = 0
        // 获取屏幕宽度
        uni.getSystemInfo({
          success: function(res) {
            win = res.windowWidth
          }
        });
        // let win = document.documentElement.clientWidth || document.body.clientWidth
        let rotate = (parseInt(Math.random() * 90 - 45)) + "deg" // 旋转角度
        let w = (Math.random() * 90) + 120
        let durTime = parseInt(Math.random() * 1.5) + 7.5 + 's' // 红包下落时间
        let left = parseInt(Math.random() * win)
        if (left < 0) {
          left = 0
        } else if (left > (win - w)) {
          left = (win + 65)
        }
        this.liParams.push({
          left: left + 'rpx',
          width: w + 'rpx',
          transforms: 'rotate(' + rotate + ')',
          durTime: durTime,
          status: 0 // 0 默认 1 中奖 2 未中奖
        })
        setTimeout(() => {
          // 多少时间结束
          clearTimeout(this.timer)
          return false
        }, this.duration * 1000)

        // 红包密度
        this.timer = setTimeout(() => {
          this.startRedPacket()
        }, 1000)
      },
      removeDom(e) {
          this.package1=true
          this.package=false
          // console.log(33333333333333,e.status)
      	// let target = e.currentTarget
      	// document.querySelector('#red_packet').removeChild(target)
      }
    }
  }
</script>

<style lang="less" scoped>
  // 红包弹窗
  .warp {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    .rect {
      width: 672rpx;
      height: 840rpx;
      margin: auto;
      
      .rectcenter {
        height: 554rpx;
        text-align: center;

        .rt-money {
          font-size: 65rpx;
          font-weight: 800;
          padding: 80rpx 0;
          color: rgba(238, 195, 24, 1);
        }

        .rt-money1 {
          font-size: 30rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: rgba(238, 195, 24, 1);
          padding: 20rpx 0;
        }
      }

      .btnredbg {
        width:370rpx;
        height:80rpx;
        background:rgba(255,211,125,1);
        border-radius:40rpx;
        line-height: 80rpx;
        margin: auto;
        color: #F42335;
        font-size: 32rpx;
        text-align: center;
      }
      .iconfil{
        width:77rpx;
        margin: 60rpx auto;
      }
    }
  }


  .rainBox {
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
    height: 92vh;
    overflow: hidden;
    background: url(https://img.51fanbei.com/h5/app/activity/redRain_01.png) no-repeat center;
    background-size: 100%;
    .winnum {
      display: inline-block;
      color: #fff;
      font-size: 40rpx;
      padding: 60rpx;
      
      .redmoney {
        color: #FED134;
        font-weight: bold;
        padding-right: 10rpx;
      }
    }

    .icon {
      display: inline-block;
      width: 82rpx;
      height: 82rpx;
      background: #6C0A75;
      font-size: 30rpx;
      line-height: 92rpx;
      text-align: center;
      position: absolute;
      top: 40rpx;
      right: 40rpx;
      z-index: 4;
      background: url(https://img.51fanbei.com/h5/app/activity/redRain_08.png) no-repeat center;
      background-size: 100% 100%;

      i {
        font-size: 24rpx;
      }
    }
  }

  .countDown {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    overflow: hidden;
    background: url(https://img.51fanbei.com/h5/app/activity/redRain_02.png) no-repeat center;
    background-size: 100% 100%;

    .second {
      width: 340rpx;
      height: 394rpx;
      margin: 410rpx auto;
      display: block;
      // margin-top: 205px;
    }
  }

  .red_packet {
    text {
      width: 250rpx;
      height: 250rpx;
      display: block;

      &.defaul {
        background: url(https://img.51fanbei.com/h5/app/activity/redRain_09.png) no-repeat center;
        background-size: 100% 100%;
      }

      &.fail {
        background: url(https://img.51fanbei.com/h5/app/activity/redRain_11.png) no-repeat center;
        background-size: 100% 100%;
      }

      &.success {
        background: url(https://img.51fanbei.com/h5/app/activity/redRain_10.png) no-repeat center;
        background-size: 100% 100%;
      }
    }

    .package1 {
      display: none;
    }

    .package {
      position: absolute;
      animation: all 3s linear;
      top: -200rpx;
      z-index: 3;
      animation: aim_move 5s linear 1 forwards;
      // &.package {

      // }
    }

    a {
      display: block;
    }
  }

  @keyframes aim_move {
    0% {
      transform: translateY(0);
    }

    100% {
      transform: translateY(120vh);
    }
  }
</style>
